<!-- 包装信息 -->
<template>
  <div>
    <div class="title pl0">
      <h3>包装信息</h3>
      <el-button
        type="text"
        v-if="isDisable && isLocked == '待锁定'"
        @click="handleEdit"
        >编辑</el-button
      >
    </div>
    <el-form
      ref="formData"
      :model="formData"
      :rules="rules"
      label-width="130px"
    >
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item
            label="计算方式:"
            v-if="formModel.baseData.productStyle != 2"
          >
            <div :class="isDisable ? 'border_line' : ''">
              <el-select
                        filterable
                v-model="formData.calculationMethod"
                size="small"
                v-if="!isDisable"
                style="width: 100%"
                placeholder="请选择"
                @change="handleSelectChange"
                :disabled="
                  formModel.baseData.productStyle != 2 &&
                  formData.productUnit == '枚'
                "
              >
                <el-option
                  :label="formData.productUnit + '/张'"
                  value="0"
                >
                </el-option>
                <el-option
                  :label="'张/' + formData.productUnit"
                  value="1"
                >
                </el-option>
              </el-select>
              <span v-else>
                <span v-if="formData.productUnit == '枚'">
                  {{
                    formData.calculationMethod == 0
                      ? formData.productUnit + "/张"
                      : "套/张"
                  }}
                </span>
                <span v-else>
                  {{
                    formData.calculationMethod == 0
                      ? formData.productUnit + "/张"
                      : "套/张"
                  }}
                </span>
              </span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            :label="'每' + packingUnitLable + '等于:'"
            v-if="formModel.baseData.productStyle != 2"
          >
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model="formData.pageEqualTags"
                placeholder="请输入内容"
                v-if="!isDisable"
                size="small"
                @blur="calculation"
              >
                <template slot="append">{{
                  formData.calculationMethod != 1
                    ? formData.productUnit
                    : packingUnit
                }}</template>
              </el-input>
              <span v-else
                >{{ formData.pageEqualTags
                }}{{
                  formData.calculationMethod != 1
                    ? formData.productUnit
                    : packingUnit
                }}</span
              >
            </div>
          </el-form-item>
          <el-form-item label="每卷等于:" v-else>
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model="formData.pageEqualTags"
                placeholder="请输入内容"
                v-if="!isDisable"
                size="small"
                @blur="calculation"
              >
                <template slot="append">枚</template>
              </el-input>
              <span v-else>{{ formData.pageEqualTags }}枚</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="每包等于:"
            v-if="formModel.baseData.productStyle != 2"
          >
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model="formData.packageEqualPages"
                v-if="!isDisable"
                placeholder="请输入内容"
                size="small"
                @blur="calculation"
              >
                <template slot="append">张</template>
              </el-input>
              <span v-else>{{ formData.packageEqualPages }}张</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer mt16" v-if="!isDisable">
      <el-button size="small" :loading="loading" @click="handleCancel"
        >取消</el-button
      >
      <el-button
        size="small"
        class="ml16"
        type="primary"
        :loading="loading"
        @click="dialogVisible = true"
        >保存</el-button
      >
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="25%"
      custom-class="comDialog "
    >
      <span>保存后会更新装箱信息，是否更新?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button
          type="primary"
          :loading="loading"
          @click="handleSave(1)"
          size="mini"
          >更新</el-button
        >
        <el-button
          type="primary"
          :loading="loading"
          @click="handleSave(2)"
          size="mini"
          >不更新</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

      <script>
export default {
  props: {
    productCode: {
      type: String,
      default: () => {
        return "";
      },
    },
    isLocked: {
      type: String,
      default: () => {
        return "";
      },
    },
    isShowEdits:{
      type: Boolean,
      default: () => {
        return false;
      },
    },
    formModel: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    formModel: {
      handler(newVal, oldVal) {
        // this.getDetail(newVal)
        this.formData.calculationMethod = JSON.stringify(this.formData.calculationMethod)
        this.formData = this.formModel.baseData;
        if (this.formModel.baseData.productStyle != 2) {
          this.formData.calculationMethod = "0";
        }
        if (this.formData.calculationMethod == 0) {
          // this.formData.pageEqualTags = 1 / this.formData.pageEqualTags;
          // this.formData.boxEqualTags =
          //   this.formData.pageEqualTags *
          //   this.formData.packageEqualPages *
          //   this.formData.boxEqualPackages;
          this.packingUnitLable = "张";
          this.packingUnit = "套";
        } else if (this.formData.calculationMethod == 1) {
          // this.formData.pageEqualTags = 1 / this.formData.pageEqualTags;
          // this.formData.boxEqualTags =
          //   (this.formData.packageEqualPages / this.formData.pageEqualTags) *
          //   this.formData.boxEqualPackages;
          this.packingUnitLable = "套";
          this.packingUnit = "张";
        }
      },
    },
  },
  data() {
    return {
      formData: {}, //表单
      rules: {}, //表单验证
      packingUnitLable: "",
      packingUnit: "",
      isDisable: true,
      loading: false,
      dialogVisible: false,
    };
  },
  methods: {
    handleSelectChange(val) {
      if (val == 0) {
        if (this.formModel.baseData.pageEqualTags) {
          this.formModel.baseData.pageEqualTags =
            1 / this.formModel.baseData.pageEqualTags;
        }
        this.formModel.productPackingInfoList.forEach((item) => {
          item.describe =
            "1箱*" +
            item.boxEqualPackages +
            "包*" +
            this.formModel.baseData.packageEqualPages +
            "张*" +
            this.formModel.baseData.pageEqualTags +
            "套";
        });
        this.packingUnitLable = "张";
        this.packingUnit = "套";
        console.log(this.formData.pageEqualTags);
      } else if (val == 1) {
        if (this.formModel.baseData.pageEqualTags) {
          this.formModel.baseData.pageEqualTags =
            1 / this.formModel.baseData.pageEqualTags;
        }
        this.formModel.productPackingInfoList.forEach((item) => {
          item.describe =
            "1箱*" +
            item.boxEqualPackages +
            "包*" +
            this.formModel.baseData.packageEqualPages +
            "张*1/" +
            1 / this.formModel.baseData.pageEqualTags +
            "套";
        });
        this.packingUnitLable = "套";
        this.packingUnit = "张";
      }
      this.$forceUpdate();
    },

    handleEdit(){
      if(this.isShowEdits){
        this.isDisable = false
        this.isShowEdits = false
        this.$emit('showEditEvent',this.isShowEdits)
      }else{
        this.$message.warning('有未保存的编辑，请保存后再编辑')
      }
    },

    //计算
    calculation() {
      if (this.formData.productStyle == 2) {
        // this.formData.boxEqualTags =
        //   this.formData.pageEqualTags * this.formData.boxEqualPackages;
        console.log(this.formModel.productPackingInfoList);
        this.formModel.productPackingInfoList.forEach((item) => {
          item.boxEqualTags =
            item.boxEqualPackages * this.formModel.baseData.pageEqualTags;
          item.describe =
            "1箱*" +
            item.boxEqualPackages +
            "卷*" +
            this.formModel.baseData.pageEqualTags +
            "枚";
        });
      } else {
        if (this.formModel.baseData.productUnit == "枚") {
          //单标
          this.formData.productPackingInfoList.forEach((item) => {
            item.boxEqualTags =
              item.boxEqualPackages *
              this.formModel.baseData.pageEqualTags *
              this.formModel.baseData.packageEqualPages;

            item.describe =
              "1箱*" +
              item.boxEqualPackages +
              "包*" +
              this.formModel.baseData.packageEqualPages +
              "张*" +
              this.formModel.baseData.pageEqualTags +
              "套";
          });
        } else {
          if (this.formData.calculationMethod == 0) {
            // this.formData.boxEqualTags =
            //   this.formData.pageEqualTags *
            //   this.formData.packageEqualPages *
            //   this.formData.boxEqualPackages;
            this.formModel.productPackingInfoList.forEach((item) => {
              item.describe =
                "1箱*" +
                item.boxEqualPackages +
                "包*" +
                this.formModel.baseData.packageEqualPages +
                "张*" +
                this.formModel.baseData.pageEqualTags +
                "套";
            });
            this.packingUnitLable = "张";
            if (this.formData.productUnit == "枚") {
              this.packingUnit = "枚";
            } else {
              this.packingUnit = "套";
            }
          } else if (this.formModel.calculationMethod == 1) {
            // this.formData.boxEqualTags =
            //   (this.formData.packageEqualPages / this.formData.pageEqualTags) *
            //   this.formData.boxEqualPackages;
            // this.packingUnitLable = "套";
            this.formModel.productPackingInfoList.forEach((item) => {
              item.describe =
                "1箱*" +
                item.boxEqualPackages +
                "包*" +
                this.formModel.baseData.pageEqualTags +
                "张*" +
                this.formModel.baseData.pageEqualTags +
                "套";
            });
            this.packingUnit = "张";
          }
        }
      }
    },

    //保存
    handleSave(type) {
      if (type == 1) {
        this.loading = true;
        this.$api.business
          .UpdateProductPackage(this.formData)
          .then(() => {
            // this.$message.success("保存成功");
            this.loading = false;
            this.isDisable = true;
            let obj = {
              productCode: this.productCode,
              productPackingInfoList: this.formModel.productPackingInfoList,
            };
            this.$api.business.UpdateProductPackingInfo(obj).then(() => {
              //保存装箱信息
              let objs = {
                state: 5,
                productCode: this.productCode,
              };
              this.$api.business.UpdateProductState(objs).then((res) => {
                this.dialogVisible = false;
                this.isShowEdits = true
        this.$emit('showEditEvent',this.isShowEdits)
                this.getDetail(this.productCode);
                this.$message.success("保存成功");
              });
            });
          })
          .catch(() => {
            this.loading = false;
          });
      } else if (type == 2) {
        this.loading = true;
        this.$api.business
          .UpdateProductPackage(this.formData)
          .then(() => {
            // this.$message.success("保存成功");
            this.loading = false;
            this.isDisable = true;
            let objs = {
              state: 5,
              productCode: this.productCode,
            };
            this.$api.business.UpdateProductState(objs).then((res) => {
              this.dialogVisible = false;
              this.isShowEdits = true
              this.$emit('showEditEvent',this.isShowEdits)
              this.getDetail(this.productCode);
              this.$message.success("保存成功");
            });
          })
          .catch(() => {
            this.loading = false;
          });
      }
    },

    //取消
    handleCancel() {
      this.$confirm("信息尚未保存，是否保存?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          this.handleSave(1);
        })
        .catch(() => {
          this.isShowEdits = true
          this.$emit('showEditEvent',this.isShowEdits)
          this.getDetail(this.productCode);
          this.isDisable = true;
        });
    },

    //获取详情
    getDetail(id) {
      this.$emit("init", "");
    },
  },
};
</script>

      <style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: center;
}

.title h3:before {
  content: "" !important;
  padding-right: 9px !important;
  border-left: 3px solid #3f61f1;
}

.border_line {
  border-bottom: 1px solid #dcdfe6;
  height: 32px;
}
::v-deep .comDialog .el-dialog__header {
  border-bottom: none !important;
}

::v-deep .el-dialog__footer {
  border-top: none;
}
</style>
